<template>
  <div class="app-container">
    <div class="box-server">
      <el-row :gutter="72" class="box-elrow">
         <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-select v-model="params.status" @change="handleFilter" placeholder="使用状态">
              <el-option
                v-for="item in robot"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
          <el-col :span="6">
          <div class="grid-content bg-purple-light">
            <el-date-picker
              v-model="params.timeStart"
              type="daterange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-select v-model="params.status" @change="handleFilter" placeholder="是否在线状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </div>
        </el-col>
          <el-col :span="4">
          <div class="grid-content bg-purple-light">
            <div class="grid-content bg-purple">
              <el-select v-model="params.timeType" @change="handleFilter" placeholder="注册时间">
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </div>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple">
            <el-input
              v-model="params.searchWord"
              @keyup.enter.native="handleFilter"
              placeholder="用户ID/昵称/手机号"
            ></el-input>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light pr">
            <el-button type="primary" @click="handleFilter(val)">搜索</el-button>
            <el-button type="danger" @click="piliang()">批量封号</el-button>
            <el-button type="success" @click="dowrnd()">导出</el-button>
            <el-button type="success" @click="Reset()">重置</el-button>
          </div>
        </el-col>
      </el-row>
      <div class="Exhibition">
        <div class="exhibitionleft"></div>
        <!-- v-for="(item,index) in listtitle"
        :key="index"-->
        <div class="exhibitionright">
          <div class="exhtitle">
            <div>用户数量:</div>
            <div class="box-item">{{totall}}</div>
            <div>在线用户量:</div>
            <div class="box-item">{{onlineNums}}</div>
            <!-- <div>用户账号总金额:</div>
            <div class="box-item">{{balance}}</div>
             <div>冻结金额:</div>
            <div class="box-item">{{freeze}}</div>-->
            <!-- <div>{{item.total}}</div>
            <div class="box-item">{{item.number}}</div>-->
          </div>
        </div>
      </div>
      <div class="box-data">
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%;"
          height="550px"
          border
          center
          @selection-change="handleSelectionChange"
          v-loading="loading"
        >
          <el-table-column type="selection"></el-table-column>
          <el-table-column fixed prop="id" label="用户ID"></el-table-column>
           <el-table-column fixed prop="im_number" label="网聊号"></el-table-column>
          <el-table-column prop="nickname" label="昵称"></el-table-column>
          <el-table-column prop="phone" label="手机号"></el-table-column>
          <el-table-column prop="device" label="登陆设备"></el-table-column>
          <el-table-column
            :show-overflow-tooltip="true"
            prop="user_type"
            :formatter="statusFormtter"
            label="机器人"
          ></el-table-column>
          <el-table-column
            prop="auth_status"
            :show-overflow-tooltip="true"
            :formatter="statusrenzheng"
            label="实名认证"
          ></el-table-column>
          <el-table-column prop="created_at" label="注册时间"></el-table-column>
          <el-table-column prop="ip" label="IP"></el-table-column>
          <el-table-column
            prop="online"
            :show-overflow-tooltip="true"
            :formatter="statuszhuangtai"
            label="在线状态"
          ></el-table-column>
          <el-table-column prop="created_at" label="最后上线时间"></el-table-column>
          <el-table-column prop="updated_at" label="最后离线时间"></el-table-column>
          <el-table-column label="操作" width="700">
            <template slot-scope="scope">
              <el-button size="mini" @click="Viewuser($event, scope.row)">查看</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >重置密码</el-button>
                <el-button size="mini" type="danger" @click="warning($event, scope.row)">警告</el-button>
                  <el-button size="mini" type="danger" @click="fenghao($event, scope.row)">封号</el-button>
                  <el-button size="mini" type="danger" @click="jiefeng($event, scope.row)">解封</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="box-page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="params.page"
          :page-sizes="[3,5,10,15]"
          :page-size="params.pageNum"
          layout="total, sizes, prev, pager, next, jumper"
          :total="parseInt(params.total)"
        ></el-pagination>
      </div>
    </div>
    <!-- 查看用户 -->
    <el-dialog title="用户资料"
      :visible.sync="Viewuservisible"
        width="30%"
    >
    <el-card class="box-card">
        <div  class="text item">
              <div class="card-box"><label for="">用户ID:</label>{{Userdata.UserID}}</div>
              <div class="card-box"><label for="">网聊号:</label>{{Userdata.im_number}}</div>
              <div class="card-box"><label for="">性别:</label>{{Userdata.nickname}}</div>
              <div class="card-box"><label for="">地区:</label>{{Userdata.diqu}}</div>
              <div class="card-box">
                <div for="">头像:</div>
              <img class="card-image" :src="Userdata.headimg"/></div>
        </div>
    </el-card>
  </el-dialog>
    <!-- 警告 -->
     <el-dialog title="发送通知警告"
      :visible.sync="warningVisible"
        width="30%"
      >
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="警告内容" prop="content">
      <el-input type="textarea" v-model="ruleForm.content"></el-input>
    </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="warningVisible = false">取消</el-button>
        <el-button type="primary" @click="warningdelete()">保存</el-button>
      </div>
</el-dialog>
 <!--封号-->
     <el-dialog title="提示"
      :visible.sync="sealtitleVisible"
        width="30%"
      >
      <el-form :model="userstyle" :rules="rules" ref="sizeForm" label-width="100px" class="demo-ruleForm">
        <div class="wnring">确定封号吗？</div>
      <el-form-item label="封号时间">
          <el-select v-model="userstyle.type" placeholder="请选择封号时间">
              <el-option
                  v-for="item in warningopston"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
          </el-select>
        </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sealtitleVisible = false">取消</el-button>
        <el-button type="primary" @click="sealtitle()">保存</el-button>
      </div>
  </el-dialog>
<!-- 批量封号 -->
  <el-dialog title="提示"
      :visible.sync="sealtitleVisible1"
        width="30%"
      >
      <el-form :model="userstyle" :rules="rules" ref="sizeForm" label-width="100px" class="demo-ruleForm">
        <div class="wnring">确定批量封号吗？</div>
      <el-form-item label="封号时间">
          <el-select v-model="userstyle.type" placeholder="请选择封号时间">
              <el-option
                  v-for="item in warningopston"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
          </el-select>
        </el-form-item>
    </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sealtitleVisible1 = false">取消</el-button>
        <el-button type="primary" @click="piliangsealtitle()">保存</el-button>
      </div>
  </el-dialog>
    <!-- 重置密码       value-format="yyyy-MM-dd hh:mm:ss" -->
    <el-dialog
      :password="dialogStatuss[dialogStatuss]"
      :visible.sync="dialogFormsVisible1"
      style="width:=55%"
    >
      <el-form
        ref="dataForm"
        :rules="rules"
        :model="resetPasswords"
        label-position="left"
        label-width="70px"
        style="width:80%; margin-left:50px;"
      >
        <el-form-item label="新密码" prop="title">
          <el-input v-model="resetPasswords.password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="title">
          <el-input v-model="resetPasswords.confirm_password" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormsVisible1 = false">取消</el-button>
        <el-button type="primary" @click="addpassword()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  userList,
  resetPassword,
  banned,
  unBanned,
  sendWarning,
  userDel
} from "@/api/user";
import { constantRoutes } from "../../../router";
import {exportExcel} from "@/exportExcel/export2Excel"
 
// import user from 'mock/user';
export default {
  data() {
    let that = this;
    return {
       rules: {
          name: [
            { desc: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]},
       ruleForm:{
        content:"",
        userId:""
      },
      sizeForm:{
        region:""
      },
      ids: [],
      multipleSelection: [],
      Userdata:{
          UserID:"用户ID",
          im_number:"网聊号",  
          nickname:"昵称",
          sex:"性别",
          diqu:"地区",
          headimg:"头像",
        },
      dialogFormVisible: false,
      warningVisible:false,
      Viewuservisible:false,
      dialogFormsVisible1: false,
      sealtitleVisible:false,
      sealtitleVisible1:false,
      tableData: [
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-08",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-06",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        },
        {
          date: "2016-05-07",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄"
        }
      ],
      loading: true,
      warningopston:[
         {
          value: "oneDay",
          label: "1天"
        },
         {
          value: "threeDay",
          label: "3天"
        }, {
          value: "fiveDay",
          label: "5天"
        },
         {
          value: "aWeek",
          label: "一周"
        },
         {
          value: "4threeMonth",
          label: "三个月"
        },
         {
          value: "sixMonth",
          label: "半年"
        }, {
          value: "forever",
          label: "永久"
        }
      ],
      dialogStatuss: "",
      resetPasswords: {
        id: "",
        password: "",
        confirm_password: ""
      },
      textMap: {
        update: "Edit",
        create: "Create"
      },
      rules: {
        type: [
          { required: true, message: "type is required", trigger: "change" }
        ],
        timestamp: [
          {
            type: "date",
            required: true,
            message: "timestamp is required",
            trigger: "change"
          }
        ],
        nickname: [{ required: true, message: "请输入名字", trigger: "blur" }],
        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
        password: [
          {
            // validator: (rule, value, callback) => {
            //   if (!that.datalist.id) {
            //     if (value === "") {
            //       callback(new Error("请输入密码"));
            //     } else {
            //       callback();
            //     }
            //   } else {
            //     callback();
            //   }
            // },
            // trigger: "blur"
            required: true,
            message: "请输入密码",
            trigger: "blur"
          }
        ],
        sex: [{ required: true, message: "请选择性别", trigger: "blur" }],
        user_type: [
          { required: true, message: "请选择公众号", trigger: "blur" }
        ],
        birthday: [{ required: true, message: "请选择日期", trigger: "blur" }]
      },
      params: {
        ip: "",
        online: "",
        searchWord: "",
        status: "",
        timeStart: "",
        timeEnd: "",
        timeType: "",
        export:0,
        page: 0,
        pageNum: "",
        total: ""
      },
      temp: {
        id: undefined,
        importance: 1,
        online: "",
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published",
        cellphone: "",
        region: "",
        official: "",
        password: "",
        value1: ""
      },
      beijing: "",
      shanghai: "",
      shi: "",
      fou: "",
      dialogStatus: "",
      options: [
        {
          value: "1",
          label: "在线"
        },
        {
          value: "0",
          label: "离线"
        }
      ],
      options1: [{ value: "1", label: "在线" }],
      options2: [{ value: "regTime", label: "注册时间"},{value: "loginTime", label: "最后上线时间"},{
        value:"logoutTime",label:'最后离线时间'
      }],
      options3: [
        {
          value: "0",
          label: "普通用户",
          value: "1",
          label: "机器人",
          value: "2",
          label: "公众号"
        }
      ],
      options4: [{ value: "1", label: "男", value: "2", label: "女" }],

      robot: [
        {
          value: "0",
          label: "已封号"
        },
        {
          value: "1",
          label: "正常"
        },
      ],
      value: "",
      value1: "",
      value2: "",
      input: "",
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      currentPage4: 4,
      totall: "",
      onlineNums: "",
      balance: "",
      freeze: "",
      listtitle: [],
      tableData: [],
      multipleSelection: [],
      userstyle:{
      userIds:[],
      type:""
      },
      content:""
      // datalist: {
      //   nickname: "",
      //   phone: "",
      //   password: "",
      //   sex: "",
      //   user_type: "",
      //   birthday: ""
      // }
    };
  },
  created() {
    this.userListlie();
  },
  methods: {
    // 查看用户
    submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
    Viewuser(row,value){
      console.log(value);
        this.Userdata.UserID=value.id;
        this.Userdata.Onlinechatnumber=value.id;
        this.Userdata.nickname=value.nickname;
        this.Userdata.sex=value.sex;
        this.Userdata.im_number=value.im_number;
        this.Userdata.headimg=value.headimg;
      this.Viewuservisible=true;
    },
    // 警告
    warning(row,value){
      this.ruleForm.userId="";
      this.ruleForm.content=""
      this.ruleForm.userId=value.id;
      this.warningVisible=true;
    },
    warningdelete(){
       sendWarning(this.ruleForm).then((response)=>{
          this.$message({
            type: "success",
            message: "警告成功"
          });
          this.warningVisible=false;
        this.userListlie();
        })
    },

    sealtitle(){
        banned({userIds:JSON.stringify(this.userstyle.userIds),type:this.userstyle.type}).then((response)=>{
          this.$message({
            type: "success",
            message: "封号成功"
          });
          this.sealtitleVisible=false;
        this.userListlie();
        })
    },
    piliangsealtitle(){
         banned({userIds:JSON.stringify(this.userstyle.userIds),type:this.userstyle.type}).then((response)=>{
          this.$message({
            type: "success",
            message: "封号成功"
          });
          this.sealtitleVisible1=false;
        this.userListlie();
        })
    },
    fenghao(row,value){
       this.userstyle.userIds=[];
      this.userstyle.userIds.push(value.id);
      console.log(this.userstyle.userIds)
       this.sealtitleVisible=true;
    },
    
    handleSelectionChange(val) {
      this.multipleSelection = val;
       this.userstyle.userIds=[];
      this.multipleSelection.map((item)=>{
        console.log(item.id);
        this.userstyle.userIds.push(item.id);

      });
    },
    piliang(){
      this.sealtitleVisible1=true;
    },
    Reset() {
      this.params.ip = "";
      this.params.online = "";
      this.params.searchWord = "";
      this.params.isRobot = "";
      this.params.sms_auth = "";
      this.params.timeStart = "";
      this.params.timeEnd = "";
      this.userListlie();
    },
    handleFilter(val) {
      this.params.page =val;
      this.userListlie();
    },
    // changeDatePickter(e) {
    //   if (e != null && e != undefined && e != "") {
    //     parseInt(new Date(e).getTime() / 1000);
    //   }
    // },
    statusFormtter(row, column) {
      const user_type = row.user_type;
      const auth_status = row.auth_status;
      if (user_type == 0) {
        return "普通用户";
      } else if (user_type == 1) {
        return "机器人";
      } else if (user_type == 2) {
        return "公众号";
      }
    },
    statusrenzheng(row, column) {
      const auth_status = row.auth_status;
      if (auth_status == 0) {
        return "是";
      } else if (auth_status == 1) {
        return "否";
      }
    },
    statuszhuangtai(row, column) {
      const status = row.status;
      if (status == 0) {
        return "已封号";
      } else if (status == 1) {
        return "正常";
      }
    },
    // 解封用户
    jiefeng(row,value) {
      this.userstyle.userIds=[];
      this.userstyle.userIds.push(value.id);
      console.log("Rswf");
      this.$confirm("确认要解封吗?", "提示", {
        confirmButtonText: "确认",
        concelButtonText: "取消",
        type: "warning"
      }).then(async() => {
       await unBanned({userIds:JSON.stringify( this.userstyle.userIds)});
       this.userListlie();
       this.$message({
          type: "success",
          message: "解封成功"
        });
      })
    },
    dowrnd(){
      this.params.export=1;
      userList(this.params)
        .then(response => {
          console.log(response);
          this.tableData = response.data;
          this.listtitle = response.summary;
          this.totall = this.listtitle.total;
          this.onlineNums = this.listtitle.onlineNums;
          this.balance = this.listtitle.balance;
          this.freeze = this.listtitle.freeze;
          this.params.page = response.summary.page;
          this.params.pageNum = response.summary.pagesize;
          this.params.total = response.summary.total;
          this.loading = false;
        })
        this.exportExcel();
    },
     exportExcel(){
     console.log(this.tableData);
     import("@/exportExcel/export2Excel").then((excel)=>{
       const tHeader=["用户ID","网聊号","昵称","手机号","登录设备","机器人","实名认证","","注册时间","IP","在线状态",'最后上线时间',"最后离线时间"];
       const filterVal=["id","im_number","nickname","phone","device","user_type","auth_status","created_at","ip","online","updated_at","created_at"];
       const list = this.dataList;
       const data =this.formatJson(filterVal,list);
       const autoWidth=true;
       excel.export_json_to_excel({
         header:tHeader,
         data,
         filename:"用户管理",
         autoWidth:true
       })

     })
   }, 
   formatJson(filterVal,tableData){
     console.log(filterVal,"-------------",tableData)
     return this.tableData.map(v=>filterVal.map(j=>v[j]));
   },
         
    // 用户列表
    // 重置密码开始
    // :current-page  ：表示绑定的当前页数

    //  :page-sizes   ： 表示绑定的下拉框中可以显示的每页 几条的数据

    //  :page-size :  表示 每页显示几条数据

    //  layout ：表示的是在 分页中需要显示那些元素 ，比如： total 表示：是否显示总条数

    //  :total  ：表示绑定的总条数有几条
    userListlie() {
      this.loading = true;
      userList(this.params)
        .then(response => {
          console.log(response);
          this.tableData = response.data;
          this.listtitle = response.summary;
          this.totall = this.listtitle.total;
          this.onlineNums = this.listtitle.onlineNums;
          this.balance = this.listtitle.balance;
          this.freeze = this.listtitle.freeze;
          this.params.page = response.summary.page;
          this.params.pageNum = response.summary.pagesize;
          this.params.total = response.summary.total;
          this.loading = false;
        })
        .catch(error => {
          console.log(error);
        });
    },

    handleEdit(value, row) {
      console.log(row);
      this.datalist = {
        phone: row.phone,
        nickname: row.nickname,
        birthday: row.birthday,
        sex: row.sex,
        id: row.id
      };
      this.dialogFormVisible = true;
      // this.d;
    },
    handleDelete(index, row) {
      console.log(row);
      this.resetPasswords.id = row.id;
      this.dialogFormsVisible1 = true;
    },
    handleSizeChange(val) {
      this.loading = false;
      this.params.pageNum = val;
      if (this.params.page) {
        this.loading = true;
      }
      this.userListlie();
    },
    handleCurrentChange(val) {
      this.params.page = val;
      console.log(val);
      this.userListlie();
    },
    addpassword() {
      resetPassword(this.resetPasswords).then(response => {
        this.$message({
          type: "success",
          message: "修改成功"
        });
        this.dialogFormsVisible1 = false;
        this.userListlie();
      });
    },
  }
};
</script>
<style lang="scss" scoped>
.app-container {
  height: 100%;
}
.wnring{
  padding:12px 12px 12px 12px;
}
.dialog-wrning{
  width:450px;
}
.box-server {
  height: 100%;
  background-color: #ffff;
  margin: 20px 20px 20px 20px;
  .box-elrow {
    padding: 16px 16px 16px 16px;
  }
  .Exhibition {
    height: 50px;
    margin: 10px 16px 0px;
    display: flex;
    background-color: #f2f2f2;
    .exhibitionleft {
      width: 8px;
      background-color: #009688;
    }
    .exhibitionright {
      display: flex;
      // justify-content: space-between;
      align-content: center;
      .box-item {
        background-color: #3ebfea;
        padding: 8px 12px 8px 12px;
        border-radius: 5px;
        margin-right: 5px;
      }
    }
  }
  .exhtitle {
    display: flex;
    align-items: center;
  }
  .box-data {
    padding: 16px 16px 16px 16px;
  }
  .el-select {
    width: 100%;
  }
  .el-date-editor.el-input {
    width: 100%;
  }
}
.pr {
  padding-top: 12px;
}
.box-page {
  display: flex;
  justify-content: flex-end;
}
.card-box{
  padding:12px 12px 12px 12px;
}
.card-image{
  width:200px;
}
</style>

